<template>
  <!-- <div >
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="curValue"
        :options="options"
        :disabled="disabled ? disabled : false"
      />
    </van-dropdown-menu>
    <van-icon :style="{display :this.curValue =='' || this.curValue == null ? 'none' : 'block'}" @click="onClear"  class="close_icon" name="cross" />
  </div> -->
    <ion-select v-model="curValue" :disabled="disabled ? disabled : false" interface="action-sheet" cancel-text="取消" :class="[{'hidden':this.curValue !='' && this.curValue != null},'app-select']">
      <template v-for="option of options">
        <ion-select-option :key="option.value" :value="option.value">{{option.text}}</ion-select-option>
      </template>
    </ion-select>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";
import CodeListService from "@app-core/service/app/code-list-service";

@Component({
  components: {}
})
export default class AppSelect extends Vue {
  /**
   * 代码表服务对象
   *
   * @type {CodeListService}
   * @memberof AppSelect
   */

  public codeListService: CodeListService = new CodeListService();

  /**
   * 当前选中值
   *
   * @type {string}
   * @memberof AppSelect
   */
  @Prop() public value?: string;

  get curValue() {
    return this.value;
  }

  set curValue(val: any) {
    this.$emit("change", val);
  }

  /**
   * 清空事件
   */
  public onClear(){
    this.$emit("change", "");
  }
  /**
   * 下拉数据数组
   *
   * @type {any[]}
   * @memberof AppSelect
   */
  public options: any[] = [];

  /**
   * 是否禁用
   *
   * @type {string}
   * @memberof AppSelect
   */
  @Prop() public disabled?: string;

  /**
   * 代码表标识
   *
   * @type {string}
   * @memberof AppSelect
   */
  @Prop() public tag!: string;

  /**
   * 代码表类型
   *
   * @type {string}
   * @memberof AppSelect
   */
  @Prop() public type!: string;

  created() {
    if (this.tag && this.type) {
      if (Object.is(this.type, "dynamic")) {
        this.codeListService
          .getItems(this.tag)
          .then((res: any) => {
            this.options = res;
          })
          .catch((error: any) => {
            this.options = [];
          });
      } else {
        this.options = this.$store.getters.getCodeListItems(this.tag);
      }
    }
  }
}
</script>
<style lang="less">
@import './app-select.less';
</style>